<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">
            ABOUT DUAL BY FIT ISLAND·MAKE A BOOKING·MANAGE WAITINGS
          </div>
          <a @click="toIndex">Go Index</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo1" href="#"
            ><img src="../static/slider/LOGO.png" />
          </a>
          <div class="btm-text">ONLINE BOOKINGS</div>
        </div>
      </div>
      <div class="login-content">
        <div class="flow-box">
          <div class="flow-title">
            <div class="title">BOOKING INFO</div>
            <div class="sub-title">PROCESS AND TERMS</div>
          </div>
          <div class="flow-body">
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">1</div>
              <div class="flow-text">
                <div class="item-title">CALENDAR</div>
                <div class="item-subtitle">SELECT DATES & SEATS</div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">2</div>
              <div class="flow-text">
                <div class="item-title">REGISTER</div>
                <div class="item-subtitle">
                  REGISTER YOUR<br />BOOKING REQUEST
                </div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">3</div>
              <div class="flow-text">
                <div class="item-title">PAYMENT</div>
                <div class="item-subtitle">CONFIRM BOOKING<br />BY DEPOSIT</div>
              </div>
            </div>
          </div>
        </div>
        <div class="login-tips">PLEASE LOG IN OR CREATE A NEW ACCOUNT</div>
        <div class="login-box">
          <div class="login-title">LOG IN</div>
          <div class="login-input">
            <div class="input-item">
              <div class="input-title">Email Address</div>
              <input type="text" v-model="loginInfo.userMail" />
            </div>
            <div class="input-item">
              <div class="input-title">Password</div>
              <input type="password" v-model="loginInfo.password" />
            </div>
            <div class="submit-conf">
              <a href="#">Forgot Your Password ?</a>
              <button @click="login">Log In</button>
              <a href="#" @click="toRegister">or Create a New Account</a>
            </div>
          </div>
        </div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { setUserInfo, setToken } from "@/utils/auth";
import { Message } from "element-ui";

export default {
  name: "Login",
  data() {
    return {
      loginInfo: {
        userMail: "",
        password: "",
        code: "string",
        nickName: "string",
        height: 0,
        weight: 0,
        sex: 0,
        age: 0,
        birthday: "string",
        golas: 0,
        grade: 0,
        spend: 0,
        decision: 0,
        phone: "string",
      },
    };
  },
  methods: {
    toRegister() {
      this.$router.push({
        name: "Register",
      });
    },
    toIndex() {
      this.$router.push({
        name: "Index",
      });
    },
    login() {
      this.$login.login(this.loginInfo).then((res) => {
        if (res && res.code === "00000") {
          Message({
            message: "Log In successfully!",
            type: "success",
            duration: 2 * 1000,
          });
          console.log(res, "login");
          let token =
            res.data.loginResult.tokenType +
            " " +
            res.data.loginResult.accessToken;
          let userInfo = JSON.stringify(res.data);
          this.$user.setToken(token);
          this.$user.setUserInfo(userInfo);
          setTimeout(() => {
            this.$router.push({
              name: "Index",
            });
          }, 1000);
        }
      });
    },
  },
};
</script>

<style scoped>
.reg-login-container {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 55vw;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  /* max-height: 100vh; */
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 3vh 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  font-size: .9vw;
  cursor: pointer;
}
.top-text{
  font-size: .83vw;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 15;
  padding: 2vh 3vw 0 3vw;
}
.login-footer {
  flex: 2;
  padding: 2vh 3vw;
  border-top: 4px solid #b08e4b;
}

#mainlogo1 img {
  width: 10.5vw;
}
.btm-text {
  color: #f3deb9;
  font-size: 1.45vw;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

.flow-box {
  display: flex;
  align-items: center;
}
.flow-title {
  margin-right: 40px;
}
.flow-title .title {
  color: #5a3819;
  font-size: .9vw;
  font-weight: bold;
}
.flow-title .sub-title {
  color: #b08e4b;
  font-size: .8vw;
}

.flow-body {
  display: flex;
  justify-content: space-around;
}

.flow-item {
  display: flex;
  align-items: center;
  margin-right: 1.5vw;
}
.flow-icon {
  display: flex;
  align-items: center;
}
.flow-icon img {
  width: .8vw;
  height: 3.5vh;
}
.flow-num {
  font-size: 2.2vw;
  font-weight: bold;
  color: #b08e4b;
  margin: 0 10px;
}

.flow-text .item-title {
  color: #b08e4b;
  font-weight: bold;
  font-size: .85vw;
}
.flow-text .item-subtitle {
  color: #b08e4b;
  font-size: .6vw;
}

.login-tips {
  margin: 3.5vh 0;
  font-size: 1.05vw;
  font-weight: bold;
  letter-spacing: 1px;
  color: #5a3819;
  /* width: 830px; */
}
.login-box {
  /* width: 830px;
  height: 350px; */
  background-color: #f3deb9;
  border-radius: 5px;
  padding: 2vh 1.8vw;
}

#subLogo img {
  width: 6vw;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: .8vw;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: .7vw;
  color: #b08e4b;
}

.login-title {
  font-size: 1.3vw;
  color: #5a3819;
  margin-bottom: 3vh;
}
.input-item {
  margin-bottom: 2.2vh;
}
.input-item .input-title {
  color: #5a3819;
  margin-bottom: .4vh;
  font-size: .9vw;
}
.input-item input {
  background-color: #f3deb9;
  border: 1px solid #b08e4b;
  height: 2.2vh;
  width: 10vw;
  border-radius: 3px;
  font-size: 0.7vw;
}
.submit-conf {
  display: flex;
  flex-direction: column;
  font-size: .85vw;
}

.submit-conf a {
  text-decoration: none;
  color: #5a3819;
}
.submit-conf a:hover {
  text-decoration: none;
  color: #b08e4b;
}
.submit-conf button {
  margin: 2.2vh 0;
  width: 9.1vw;
  height: 3.2vh;
  background: linear-gradient(to bottom, #f3deb9, #b08e4b);
  border: 1px solid #5a3819;
  color: #f3deb9;
  font-size: .85vw;
  border-radius: 3px;
  cursor: pointer;
}

.submit-conf button:active {
  background: #5a3819;
  cursor: pointer;
}
</style>